<template>
    <el-form
          :inline="true"
          :model="searchAgain"
          ref="ruleFormRef"
          :rules="rules"
        >
          <el-form-item class="again" prop="flightNumber">
            <el-input
              v-model="searchAgain.flightNumber"
              placeholder="航班号"
              maxlength="10"
              size="large"
              spellcheck="false"
              @blur="upCard = false"
            />
          </el-form-item>

          <el-form-item class="again" prop="upDate">
            <el-col :span="11">
              <el-date-picker
                v-model="searchAgain.upDate"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                type="date"
                placeholder="选择日期"
                size="large"
                style="width: 220px"
                :disabled-date="disabled"
                @change="again_onSubmit()"
                @click="again_onSubmit"
              />
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-button
              class="again_button"
              type="warning"
              size="large "
              plain
              @click="again_onSubmit"
              >重新搜索</el-button
            >
          </el-form-item>
    </el-form>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";

var disabled = (time) => {
  return time.getTime() < Date.now() - 8.64e7 - (1*1000*60*60*24*3);
};

//路由
const router = useRouter();
let route = useRoute();

//表单数据
const searchAgain = reactive({
  flightNumber: '',
  upDate: '',
});

watch(route,(newValue,oldValue)=>{
  searchAgain.flightNumber = route.query.flightNumber
  searchAgain.upDate = route.query.departureDate
  },{immediate:true})

//表单验证
const ruleFormRef = ref();
const rules = {
  flightNumber: [
    { required: true, message: "航班号不能为空", trigger: "blur" },
  ],
  upDate: [{ required: true, message: "日期不能为空", trigger: "blur" }],
};
//提交搜索
const again_onSubmit =() =>{
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            router.push({
            path: "/index/flightdynamic/content",
            query:{
                flightNumber:searchAgain.flightNumber,
                departureDate:searchAgain.upDate
            }
        });
        }else{
            ElMessage.error("请输入正确数据");
            return false;
        }
    })
}
</script>

<style>

</style>